<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教师问答</title>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -->
<link rel="stylesheet" href="${BasePath}/css/bootstrap.min.css">
<link rel="stylesheet" href="${BasePath}/css/bootstrap-pager.css">
<link rel="stylesheet" href="${BasePath}/css/common.css?v=${cssVersion}">
<style>
.column{
margin: 10px;
padding: 10px;
padding: 10px;
border: 1px solid gray;
border-radius: 10px;
width: 420px;
heigh: 260px;
}
.question .content{
width: 100%;
margin-bottom: 10px;
}
.question{
	font-size: 14px;
	height: 160px;
}
.column .userinfo{
	vertical-align: middle;
}
.userinfo .username{
/* float: left; */
font-size: 16px;
font-weight: 500;
}
.userinfo{
display:flex;
heigh: 100px;
}
.userinfo .releasetime{
font-size: 16px;
font-weight: 500;
margin-left: 10px;
}
.userinfo button{
margin-left: 20px;
}
</style>
</head>
<body>
<div class="panel panel-default" style="width: 94%; margin:10px auto;">
	<div class="panel-heading">
        <h3 class="panel-title">问答列表</h3>
    </div>
	<div class="panel-body">
		<div class="container" style="padding: 0px;margin:0px;width:100%;">
		<#if page.list?size gt 0>
		    <div class="row">
			<#list page.list as a>
			<#if a_index lt 3>
				<div class="col-lg-4 column">
				    <div class="question">
					    <h4>${a.title}</h4>
					    <div class="content">
					    ${a.descr}
					    </div>
				    </div>
					<div class="userinfo">
			            <p class="username">${a.nickName}</p>
			            <p class="releasetime">2018-08-12 18:23</p>
			            <#if a.isChoice == 1>
			            	<button type="button" qid="${a.id}" class="btn btn-success cancelChoice">取消精选</button>
			            <#else>
			            	<button type="button" qid="${a.id}" class="btn btn-success setChoice">设为精选</button>
			            </#if>
			        </div>
				</div>
			</#if>
			</#list>
			</div>
		</#if>
		<#if page.list?size gt 3>
		    <div class="row">
			<#list page.list as a>
			<#if a_index gt 2 && a_index lt 6>
				<div class="col-lg-4 column">
				    <div class="question">
					    <h4>${a.title}</h4>
					    <div class="content">
					    ${a.descr}
					    </div>
				    </div>
					<div class="userinfo">
			            <p class="username">${a.nickName}</p>
			            <p class="releasetime">2018-08-12 18:23</p>
			            <#if a.isChoice == 1>
			            	<button type="button" qid="${a.id}" class="btn btn-success cancelChoice">取消精选</button>
			            <#else>
			            	<button type="button" qid="${a.id}" class="btn btn-success setChoice">设为精选</button>
			            </#if>
			        </div>
				</div>
			</#if>
			</#list>
			</div>
		</#if>
		<#if page.list?size gt 6>
		    <div class="row">
			<#list page.list as a>
			<#if a_index gt 5 && a_index lt 9>
				<div class="col-lg-4 column">
				    <div class="question">
					    <h4>${a.title}</h4>
					    <div class="content">
					    ${a.descr}
					    </div>
				    </div>
					<div class="userinfo">
			            <p class="username">${a.nickName}</p>
			            <p class="releasetime">2018-08-12 18:23</p>
			            <#if a.isChoice == 1>
			            	<button type="button" qid="${a.id}" class="btn btn-success cancelChoice">取消精选</button>
			            <#else>
			            	<button type="button" qid="${a.id}" class="btn btn-success setChoice">设为精选</button>
			            </#if>
			        </div>
				</div>
			</#if>
			</#list>
			</div>
		</#if>
		</div>
		<div id="page-container-static-big" style="text-align: center;">
			<ul id="pageLimit"></ul>
		</div>
	</div>
</div>

	
	<script type="text/javascript" src="${BasePath}/js/jquery-3.3.1.min.js"></script>  
	<script type="text/javascript" src="${BasePath}/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${BasePath}/js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="${BasePath}/js/bootstrap-pager.js"></script>
	<script type="text/javascript" src="${BasePath}/js/common-func.js?v=${jsVersion}"></script>
	<script type="text/javascript" src="${BasePath}/js/ajaxHeader.js?v=${jsVersion}"></script>  
	<script>
	
	//禁用返回
    window.history.pushState(null, null, "#");
	window.addEventListener("popstate", function(e) {
		window.history.pushState(null, null, "#");
	});

	var teacherId = ${teacher.id};
	var totalPages = ${page.pages};
	var pageSize = ${page.pageSize};
	$('#pageLimit').bootstrapPaginator({
		currentPage: 1,
		totalPages: totalPages,
		size:"big",
		bootstrapMajorVersion: 3,
		alignment:"right",
		numberOfPages: pageSize,
		itemTexts: function (type, page, current) {
			switch (type) {
			case "first": return "首页";
			case "prev": return "上一页";
			case "next": return "下一页";
			case "last": return "末页";
			case "page": return page;
			}//默认显示的是第一页。
		},
		//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
		onPageClicked: function (event, originalEvent, type, page){
			
			var questions = getTeacherQuesions(teacherId, page, pageSize);
			console.log('questions:' + JSON.stringify(questions))
			var tDoms = getQuesionsDom(questions);
// 			console.log('tDoms:' + tDoms)
			$('.container').html(tDoms);
			
			regAuditEvents();
		}
	});
	
	$(document).ready(function(){
		regAuditEvents();
	});
	
	function setChoice(dom){
		var qid = dom.attr("qid");
		
		alert(qid + ' 设为精选');
		
		dom.removeClass('setChoice');
		dom.addClass('cancelChoice');
		dom.text("取消精选");
	}
	
	function cancelChoice(dom){
		var qid = dom.attr("qid");
		
		alert(qid + ' 取消精选');
		
		dom.removeClass('cancelChoice');
		dom.addClass('setChoice');
		dom.text("设为精选");
	}
	
	function regAuditEvents(){
		$(".setChoice").click(function(){
			var qid = $(this).attr("qid");
			var option = $(this).text();
			if(option == "设为精选"){
				alert(option)
			}
		});
		
		$(".cancelChoice").click(function(){
			cancelChoice($(this))
			
			$(this).unbind();
			$(this).click(function(){
				setChoice($(this))
			});
		});
	}
	
	function getTeacherQuesions(memberId, pageNum, pageSize){
		var ret = null;
		var params = {memberId: memberId, pageNum: pageNum, pageSize: pageSize};
		var req = {requestData: JSON.stringify(params)};
		$.ajax({
			url: "${BasePath}/api/question/teacher",
			type:'POST',
			contentType : "application/json; charset=utf-8",
			data: JSON.stringify(req),
			dataType:'json',
			async: false,
			success:function (data) {
				if(data == null){
					console.log("没有数据");
					return;
				}
				
				ret = JSON.parse(data.responseData);
			}
		});
		return ret;
	}
	
	function getQuestionDom(question){
		var dom = '';
		if(!question) return dom;
		
		if(!question.title) question.title = '';
		if(!question.descr) question.descr = '';
		if(!question.nickName) question.nickName = '';
		if(!question.releasetime) question.releasetime = '';
		
		dom += '\r\n<div class=\"col-lg-4 column\">';
		
		dom += '\r\n<div class=\"question\">';
		dom += '\r\n<h4>' + question.title + '</h4>';
		
		dom += '\r\n<div class=\"content\">';
		dom += question.descr;
		dom += '\r\n</div>';
		
		dom += '\r\n</div>';
		
		dom += '\r\n<div class=\"userinfo\">';
		dom += '\r\n<p class=\"username\">' + question.nickName + '</p>';
		dom += '\r\n<p class=\"releasetime\">' + '2018-08-12 18:23' + '</p>';
		dom += '\r\n<button type=\"button\" class=\"btn btn-success\">设为精品推荐</button>';
	        
		dom += '\r\n</div>';
		
		dom += '\r\n</div>';
		
		return dom;
	}
	
	function getQuesionsDom(questions){
		var dom = '';
		if(!questions || questions.length == 0) return dom;
		
		
		dom += '\r\n<div class=\"row\">';
		for(var i = 0; i < 3 && i < questions.length; ++i){
			dom += getQuestionDom(questions[i]);
		}
		dom += '\r\n</div>';
		
		if(questions.length > 3){
			dom += '\r\n<div class=\"row\">';
			for(var i = 3; i < 6 && i < questions.length; ++i){
				dom += getQuestionDom(questions[i]);
			}
			dom += '\r\n</div>';
		}
		
		if(questions.length > 6){
			dom += '\r\n<div class=\"row\">';
			for(var i = 6; i < 9 && i < questions.length; ++i){
				dom += getQuestionDom(questions[i]);
			}
			dom += '\r\n</div>';
		}
		
		return dom;
	}
	
	</script>
    
</body>
</html>